<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>艺术品</title>
  <link rel="stylesheet" href="css/publics.css">
  <link rel="stylesheet" href="css/arts.css">
  <script src="js/jquery-3.5.1.js"></script>
  <script src="js/arts_data.js"></script>
</head>
<body>
  <header>
    <div class="H">
      <div class="header_hidden" style="display: none;">
        <div class="logo"></div>
        <div class="nav">
          <ul>
            <li id="home_page">
              <a href="./index.html" class="first_sheet">首页</a>
            </li>
            <li style="position: relative;" class="arts">
              <a href="" class="second_sheet  prevent_page">艺术品</a>
              <div class="art_class">
                <ul>
                  <li><a href="./arts.html">全部</a></li>
                  <li><a href="./arts.html">入门收藏</a></li>
                  <li><a href="./arts.html">潜力收藏</a></li>
                  <li><a href="./arts.html">名作收藏</a></li>
                </ul>
              </div>
            </li>
            <li><a href="./artists.html" class="second_sheet">艺术家</a></li>
            <li><a href="./art_serve.html" class="second_sheet">艺术服务</a></li>
            <li><a href="./art_view.html" class="second_sheet">艺术视野</a></li>
          </ul>
        </div>
        <div class="photo_hidden">
          <div class="login_hidden">
            <a href="./arts.html">
              <img src="imgs/public/login.png">
            </a>
          </div>
          <div class="car_shop_hidden">
            <a href="">
              <img src="imgs/public/car.png" alt="">
            </a>
          </div>
          <div class="phone_hidden">
            <img src="imgs/public/SJPC.png" alt="" style="cursor: pointer;">
            <div class="phone_scanning">
              <p>使用手机扫一扫</p>
              <img src="./imgs/public/AndroidDownQRcode.png" alt="" style="width: 124px; height: 124px;"><br>
              <span>购买咨询：400-605-7033</span>
            </div>
          </div>
        </div>
      </div>
      <div class="header_top">
        <div class="logo">
          — 原创艺术品电商
        </div>
        <div class="search">
          <div class="search_box">
            <div class="choices" style="vertical-align: top; line-height: 40px;">
              <span style="cursor: pointer;">作品<i></i></span>
            </div>
            <input type="text" placeholder="搜索感兴趣的关键字" style="height: 30px; vertical-align: middle; border: none; outline:none">
            <img class="chooseicion" src="imgs/public/svg_file.svg" alt="" width="30px" height="30px">
          </div>
        </div>
        <div class="header_content">
          <div class="login">
            <a href="">
              <img src="" alt="">
              <a href="login.html">登录/注册</a>
            </a>
          </div>
          <div class="my_order">
            <a href="">我的订单</a>
          </div>
          <div class="my_news">
            <a href="">我的消息</a>
          </div>
          <div class="online_service">
            <a style="cursor: pointer;">在线客服</a>
          </div>
          <div class="phone_version">
            <a href="">手机版</a>
            <div class="phone_scanning">
              <p>使用手机扫一扫</p>
              <img src="./imgs/public/AndroidDownQRcode.png" style="width: 124px; height: 124px;"><br>
              <span>购买咨询：400-605-7033</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="header_bottom">
      <div class="container">
        <div class="all_class">
          <h2>所有分类</h2>
          <ul>
            <li><a href="">油画</a></li>
            <li><a href="">版画</a></li>
            <li><a href="">水墨</a></li>
            <li><a href="">水粉(彩)</a></li>
            <li><a href="">书法</a></li>
            <li><a href="">雕塑</a></li>
            <li><a href="">摄影</a></li>
            <li><a href="">其他</a></li>
          </ul>
        </div>
        <div class="nav">
          <ul>
            <li id="home_page"><a href="./index.html">首页</a></li>
            <li style="position: relative;" class="arts prevent_page">
              <a href="./arts.html">艺术品</a>
              <div class="art_class">
                <ul>
                  <li><a href="./arts.html">全部</a></li>
                  <li><a href="./arts.html">入门收藏</a></li>
                  <li><a href="./arts.html">潜力收藏</a></li>
                  <li><a href="./arts.html">名作收藏</a></li>
                </ul>
              </div>
            </li>
            <li><a href="./artists.html" class="second_sheet">艺术家</a></li>
            <li><a href="./art_serve.html" class="second_sheet">艺术服务</a></li>
            <li><a href="./art_view.html" class="second_sheet">艺术视野</a></li>
          </ul>
        </div>
      </div>
      <div class="car_shop">
        <a href="">购物车</a>
      </div>
    </div>
  </header>
  <section>
    <div class="arts_type_check_hidden" style="display: none;">
      <div class="check_hidden_left">
        <div class="check_left_price">
          <h4>价格</h4>
          <div class="pro_bar_hidden">
            <div class="price_num">￥<span>0</span> ~ max</div>
            <input type="range" class="price" value="0" min="0" max="31000" step="1000">
          </div>
        </div>
        <div class="check_left_size">
          <h4>尺寸</h4>
          <div class="pro_bar_hidden">
            <div class="size_num"><span>0</span> ~ max</div>
            <input type="range" class="size" value="0" min="0" max="210" step="10">
          </div>
        </div>
        <div class="check_left_color">
          <h4>颜色</h4>
          <div class="pro_bar_hidden">
            <div class="color_box" style="background-color: #ef0082;" ></div>
            <div class="color_box" style="background-color: #fc8b8b;" ></div>
            <div class="color_box" style="background-color: #8f3412;" ></div>
            <div class="color_box" style="background-color: #e73233;" ></div>
            <div class="color_box" style="background-color: #ff7e03;" ></div>
            <div class="color_box" style="background-color: #fdc709;" ></div>
            <div class="color_box" style="background-color: #32cc66;" ></div>
            <div class="color_box" style="background-color: #0fe2fa;" ></div>
            <div class="color_box" style="background-color: #7334f2;" ></div>
            <div class="color_box" style="background-color: #666666;" ></div>
          </div>
        </div>
        <div class="check_left_shape">
          <h4>形状</h4>
          <div class="pro_bar_hidden">
            <div class="pro_bar_shapebox">
              <div class="box"><img src="imgs/arts/square.svg" alt=""></div>
              <div class="box"><img src="imgs/arts/heng.svg" alt=""></div>
              <div class="box"><img src="imgs/arts/shu.svg" alt=""></div>
              <div class="box"><img src="imgs/arts/circle.svg" alt=""></div>
              <div class="box"><img src="imgs/arts/buguize.svg" alt=""></div>
            </div>
          </div>
        </div>
        <div class="check_left_search">
          <div class="label_box">
            <img src="imgs/public/svg_file.svg" alt="">
            <input type="text" placeholder="搜索艺术家或艺术品">
          </div>
        </div>
      </div>
      <div class="check_hidden_right">
        <div class="item">
          <h4>摆放空间</h4>
          <span>办公</span>
          <span>客厅</span>
          <span>书房</span>
          <span>餐厅</span>
          <span>儿童房</span>
          <span>走廊/回廊</span>
          <span>卧室</span>
          <span>酒店大堂</span>
          <span>户外空间</span>
        </div>
        <div class="item">
          <h4>分类</h4>
          <span>油画</span>
          <span>版画</span>
          <span>水墨</span>
          <span>水彩(粉)</span>
          <span>雕塑</span>
          <span>摄影</span>
          <span>书法</span>
          <span>其他</span>
        </div>
        <div class="item">
          <h4>风格</h4>
          <span>抽象</span>
          <span>具象</span>
          <span>观念</span>
          <span>卡通</span>
          <span>传统国画</span>
          <span>实验水墨</span>
          <span>其他</span>
        </div>
        <div class="item">
          <h4>题材</h4>
          <span>风景</span>
          <span>人物</span>
          <span>静物</span>
          <span>动物</span>
          <span>花鸟</span>
          <span>山水</span>
          <span>其他</span>
        </div> 
      </div>
    </div>
    <div class="arts_type_check" >
      <div class="check_left">
        <div class="check_left_price">
          <h4>价格</h4>
          <div class="pro_bar">
            <div class="pro_bar_box">
              <div class="box"></div>
              <div class="box"></div>
              <div class="box"></div>
              <div class="box"></div>
              <div class="box"></div>
            </div>
            <div class="pro_bar_num">
              <div class="num" style="text-align: left;">0</div>
              <div class="num">￥2,000</div>
              <div class="num">￥8,000</div>
              <div class="num">￥15,000</div>
              <div class="num">￥30,000</div>
              <div class="num" style="text-align: right;">max</div>
            </div>
          </div>
        </div>
        <div class="check_left_size">
          <h4>尺寸</h4>
          <div class="pro_bar">
            <div class="pro_bar_box">
              <div class="box"></div>
              <div class="box"></div>
              <div class="box"></div>
              <div class="box"></div>
              <div class="box"></div>
            </div>
            <div class="pro_bar_num">
              <div class="num" style="text-align: left;">0</div>
              <div class="num">50cm</div>
              <div class="num">100cm</div>
              <div class="num">150cm</div>
              <div class="num">200cm</div>
              <div class="num" style="text-align: right;">max</div>
            </div>
          </div>
        </div>
        <div class="check_left_color">
          <h4>颜色</h4>
          <div class="pro_bar">
            <div class="pro_bar_colorbox">
              <div class="box" style="background-color: #f00;"></div>
              <div class="box" style="background-color: #ff0;"></div>
              <div class="box" style="background-color: #0f0;"></div>
              <div class="box" style="background-color: #0099ff;"></div>
              <div class="box" style="background-color: #171310;"></div>
            </div>
          </div>
        </div>
        <div class="check_left_shape">
          <h4>形状</h4>
          <div class="pro_bar">
            <div class="pro_bar_shapebox">
              <div class="box"><img src="imgs/arts/square.svg" alt=""></div>
              <div class="box"><img src="imgs/arts/heng.svg" alt=""></div>
              <div class="box"><img src="imgs/arts/shu.svg" alt=""></div>
              <div class="box"><img src="imgs/arts/circle.svg" alt=""></div>
              <div class="box"><img src="imgs/arts/buguize.svg" alt=""></div>
            </div>
          </div>
        </div>
        <div class="check_left_search">
          <div class="label_box">
            <img src="imgs/public/svg_file.svg" alt="">
            <input type="text" placeholder="搜索艺术家或艺术品">
          </div>
        </div>
      </div>
      <div class="check_center">
        <div class="item">
          <h4>摆放空间</h4>
          <span>办公</span>
          <span>客厅</span>
          <span>书房</span>
          <span>餐厅</span>
          <span>儿童房</span>
          <span>走廊/回廊</span>
        </div>
        <div class="item">
          <h4>分类</h4>
          <span>油画</span>
          <span>版画</span>
          <span>水墨</span>
          <span>水彩(粉)</span>
          <span>雕塑</span>
          <span>摄影</span>
        </div>
      </div>
      <div class="check_right">
        <div class="art_concept">
          <span>抽象</span>
          <span>具象</span>
          <span>观念</span>
          <span>传统国画</span>
          <br>
          <span>人物</span>
          <span>风景</span>
          <span>静物</span>
        </div>
        <div class="art_concept_explain">
          <div class="explain_box explain_cx">
            <h2>抽象</h2>
            <h3>Abstract-Expression</h3>
            <hr style="width: 100px;">
            <p>是既不模仿又不直接再现外在现实，以形式和色彩本身来打动观众的艺术风格。通过对现实的扭曲变形来表现艺术家的激情和内心幻象，强调表现的自发性和艺术家的个性。</p>
          </div>
          <div class="explain_box explain_jx">
            <h2>具象</h2>
            <h3>Realism</h3>
            <hr style="width: 100px;">
            <p>起源于十九世纪的法国。写实不是描绘抽象的符号，而是对真实存在的物体或想象出来的对象的描述。</p>
          </div>
          <div class="explain_box explain_gn">
            <h2>观念</h2>
            <h3>Conceptual Art</h3>
            <hr style="width: 100px;">
            <p>观念艺术质疑艺术这一整体观念，例如：艺术是否可以指涉及其自身之外的东西。观念艺术需要通过语言和文字进行表达，它的呈现方式为绘画、方案计划书、照片、影像等。</p>
          </div>
          <div class="explain_box explain_ctgh">
            <h2>传统国画</h2>
            <h3>Chinese Painting</h3>
            <hr style="width: 100px;">
            <p>传统国画：国画一词起源于汉代，汉朝人认为中国是居天地之中者，所以称为中国，将中国的绘画称为“中国画”，简称“国画”。主要指的是画在绢、宣纸、帛上并加以装裱的卷轴画。国画是汉族的传统绘画形式，是用毛笔蘸水、墨、彩作画于绢或纸上。</p>
          </div>
          <div class="explain_box explain_rw">
            <h2>人物</h2>
            <h3>Portrait</h3>
            <hr style="width: 100px;">
            <p>是以人物为形象主体的画。中国画人物力求逼真传神，气韵生动，形神兼备，西方人物画严谨规整，秉承理性思维，以光感，质感体积和空间感来体现人物。近现代绘画运动之后则更加侧重人物精神及心理层面的表达，风格和媒介也更加多样化。</p>
          </div>
          <div class="explain_box explain_fj">
            <h2>风景</h2>
            <h3>Landscape</h3>
            <hr style="width: 100px;">
            <p>风景的概念起源于绘画，人类绘画早先的主题是动物，然后是人类自己，最早有记载的的单纯风景画是中国晋代展子虔的《游春图》，以后中国画中的风景画被称为山水画。在欧洲，“风景”的概念起源于荷兰，也是从绘画开始，最早的记录是1598年，后来被英语借用。</p>
          </div>
          <div class="explain_box explain_jw">
            <h2>静物</h2>
            <h3>Still-life</h3>
            <hr style="width: 100px;">
            <p>仅以画家近距离观察的物体（大多数为家居用品——餐具、花卉、书籍，但有时是头盖骨、已死的猎物等）为内容的绘画。静物在早期东方艺术中相当重要，在西方，它直到16世纪才作为独立题材出现。</p>
          </div>
        </div>
      </div>
    </div>
    <div class="advanced_filter">
      <button type="button">高级筛选<img src="imgs/jt_down.jpg" alt=""></button>
    </div>
    <div style="width:1272px; margin: auto;">
      <div class="contaier" id="brand-waterfall" style="height: 2000px;">
      </div>
    </div>   
</section>
  <footer>
    <div class="container">
      <div class="footer_list">
        <ul>
          <li><a href="">推荐</a></li>
          <li><a href="">全部作品</a></li>
          <li><a href="">如何购买</a></li>
          <li><a href="">关于我们</a></li>
          <li><a href="">网站地图</a></li>
        </ul>
      </div>
      <div class="footer_copy">
        <p>京ICP备16003461号 Copyright &copy; 2015-2020 艺网YWART.COM 版权所有</p>
      </div>
    </div>
  </footer>
  <aside>
    <div class="leave_message" draggable="true">
      <div class="leave_msg_top">
        <p>给我们留言</p>
        <i><img src="imgs/最小化.png" alt=""></i>
        <i><img src="imgs/关闭.png" alt=""></i>
      </div>
      <div class="leave_msg_bottom">
        <p class="sorry">您好，很抱歉我们暂时无法为您提供服务，如需帮助，请留言，我们将尽快联系并解决您的问题</p>
        <div class="sorry_text">
          <p class="phone">电话</p>
          <input type="text" placeholder="请输入电话" class="phone_input">
          <p class="msg_content">留言内容</p>
          <textarea placeholder="请输入留言内容" class="msg_input"></textarea>
          <div class="picture_up">
            <div class="pic_up_btn">上传图片</div>
          </div>
          <b>* 支持 jpg 、png、gif、svg 格式的图片，可上传 5 张，单张最大 5M</b>
          <input type="button" value="提交" class="msg_btn">
        </div>
      </div>
    </div>
  </aside>
  <script src="js/public.js"></script>
  <script src="js/arts.js"></script>
  <script src="js/arts_data.js"></script>
</body>
</html>